<template>
   <div class="common-content">
     <k-tabs @change="changeTabs" :list="tabsList" ></k-tabs>
     <ul class="video-list">
       <li @click="jumpToDetails(item)" v-for="item in  pagingData.dataList" :key="item.id">
         <el-card body-style="padding:0" >
           <div class="cover">
             <img :src="$TOOL.filterUrl(item.imgUrl)">
             <div class="video-icon"></div>
           </div>
           <div class="title ">
             <p class="line-2">{{item.title}}</p>
           </div>
         </el-card>
       </li>
     </ul>
     <div class="df-cc">
       <el-pagination background layout="prev, pager, next" :total="pagingData.total" v-model:current-page="pagingData.pageNum" :page-size="pagingData.pageSize" @current-change="loadPageData"></el-pagination>
     </div>

   </div>
</template>

<script setup>
import {homeApi} from "@/api";
import {useRouter} from "vue-router";
import KTabs from "@/components/k-tabs.vue";
const tabsList = [
  {
    name: "媒体视频",
    code: "1"
  },
  {
    name: "科普视频",
    code: "2"
  },
];
const pagingData=reactive({
  pageNum:1,
  pageSize:9,
  dataList:[],
  type:1,
  total:0
})
 onMounted(loadPageData)
function changeTabs(index){
  pagingData.type=tabsList[index].code
  loadPageData()
}

 async function loadPageData(){
    const res=await homeApi.videoViewInfoListPage.get({
      pageNum:pagingData.pageNum,
      pageSize:pagingData.pageSize,
      type:pagingData.type
    })
    pagingData.dataList=res.list
    pagingData.total=res.total
 }

 const router=useRouter()
function jumpToDetails(item){
  router.push(`/videoDetails?id=${item.id}`)
}
</script>

<style scoped lang="scss">
.common-content{
  background: #FFFFFF;
  padding: 30px;
  .video-list{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    margin-top: 30px;
    gap: 16px;
    .video-icon{
      --size: 60px;
      --bootom: 10%;
      width: var(--size);
      height: var(--size);
      background-color: rgba(0, 0, 0, 0.65);
      position: absolute;
      right: 15px;
      bottom: var(--bootom);
      border-radius: 50%;
      z-index: 2;
      &:before{
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-left: 15px solid #fff;
        border-bottom: 10px solid transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-48%, -50%);
      }
    }
    li{
      cursor: pointer;
      width: calc(100% / 4 - 16px * 3 );
      .cover{
        width: 100%;
        overflow: hidden;
        position: relative;
        &:hover{
          img{
            transform: scale(1.05);
          }
        }
        img{
          object-fit: cover;
          aspect-ratio: 16 / 9;
          display: block;
          transition: all 0.3s ease-out;
          width: 100%;
        }
      }
      .title{
        font-size: 16px;
        padding: 16px;
      }
    }
  }
}
</style>
